<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.demo {
				width: 1200px;
				height: 600px;
				margin: 0px auto;
				overflow: hidden;
			}

			.demo1 {
				width: 6000px;
				height: 600px;
				margin: 0px auto;
				font-size: 0px;
				animation: text 10s infinite linear;
			}

			.demo1 img {
				width: 1200px;
				height: 600px;
				float: left;
				/* 开启浮动*/
			}

			@keyframes text {

				/*0%-20%是播放下一个图片，0%-10%是图片暂停的时间*/
				0%,
				10% {
			 	margin-left: 0px;
				}

				20%,
				30% {
					margin-left: -1200px;
				}

				40%,
				50% {
					margin-left: -2400px;
				}

				60%,
				70% {
					margin-left: -3600px;
				}

				80%,
				90% {
					margin-left: -4800px;
				}
				100% {
					margin-left: -4800px;
				}
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="demo1">
				<img src="1.jpg" alt="">
				<img src="2.jpg" alt="">
				<img src="3.jpg" alt="">
				<img src="4.jpg" alt="">
				<img src="1.jpg" alt="">
			</div>
		</div>
	</body>
</html>
